<template>
  <!--历史记录页面-->
  <div>
    <div class="aside-main">
      <el-button type="text"><img src="../../assets/img/back.svg" />返回</el-button>
      <hr style=" height:1px;border:none;border-top:1px solid #eeeeee;" />
      <el-radio v-model="radio" label="1">年查询</el-radio>
      <el-radio v-model="radio" label="2">时间段</el-radio>
      <el-select v-model="value" placeholder="区域">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value" placeholder="站名">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="input" placeholder="关键字"></el-input>

      <div class="block">
        <el-date-picker v-model="value7" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始" end-placeholder="结束" :picker-options="pickerOptions2">
        </el-date-picker>
      </div>
      <hr style=" height:1px;border:none;border-top:1px solid #eeeeee;" />
      <el-row>
        <el-button type="primary">查询</el-button>
        <el-button type="success">重置</el-button>
      </el-row>
    </div>
  </div>

</template>

<script>

const options = [{
  value: '选项1',
  label: '黄金糕'
}, {
  value: '选项2',
  label: '双皮奶'
}, {
  value: '选项3',
  label: '蚵仔煎'
}, {
  value: '选项4',
  label: '龙须面'
}, {
  value: '选项5',
  label: '北京烤鸭'
}]
export default {
  data () {
    return {
      value: '',
      options,
      radio: '1',
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value6: '',
      value7: ''
    }
  }
}
</script>
<style scoped>
@import "./css/History.css";
</style>
